<template>
    <div>
        <header>
            <div class="sub-title">
                <div class="sub-text">农业数据统计</div>
                <p class="sub-text-en">Agricultural data statistics</p>
            </div>
        </header>
        <ul class="item-box">
            <li v-for="(item,index) in farmingData" :class="item.classname" :key="index">
                <div class="item-title">{{item.title}}<span class="item-line">|</span><span class="item-unit">{{item.unit}}</span></div>
                <div class="item-num">
                    <countTo :startVal='0' :endVal='item.value' :duration=4000></countTo>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
    export default {
        name:'farming',
        components: {
        },
        props: {
        },
        data () {
            return {
                farmingData:[
                    {
                        title:'合作社',
                        unit:'家',
                        value:9800,
                    },
                    {
                        title:'配送商',
                        unit:'家',
                        value:9250,
                    },
                    {
                        title:'种植规模',
                        unit:'亩',
                        value:550,
                    },
                    {
                        title:'养殖规模',
                        unit:'头',
                        value:19897,
//                        classname:''
                    },
                    {
                        title:'涉贫困户',
                        unit:'户',
                        value:835,

                    },
                    {
                        title:'种植户',
                        unit:'户',
                        value:18635,
                    }
                    ]
            }
        },
        computed: {
        },
        methods: {
            init(){
//                console.log(this.$route.query.id)
                if(this.$route.query.id===undefined){
                    console.log('主页')
                }else {
                    console.log('副页')
                }
                this.farmingData.map(function (currentValue,index,arr) {
                    if(!parseInt((index+1)%3)){
                        currentValue.classname='item'
                    }else {
                        currentValue.classname='item item-border'
                    }
                })
//                console.log(this.farmingData)
            }
        },
        mounted () {
        },
        created(){
            this.init()

        }
    }

</script>
<style type="text/css">
</style>